<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="检索内容">
        <el-input size="mini" v-model="formInline.user" placeholder="账号|姓名|邮箱"></el-input>
      </el-form-item>

      <el-form-item >
        <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
<!-- 数据表样式-->
<el-table :data="list" style="width: 100%" border height="640" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="80"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"> </el-table-column>
      <el-table-column prop="loginname" label="账号" width="200">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="200" align="center">
      </el-table-column>
      <el-table-column prop="tel" label="手机" width="200" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200" align="center"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="60" align="center"> 
           <template slot-scope="scope">
              {{scope.row.sex == 1?"男":"女"}}
           </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.row)" size="small" align="center">选课</el-button>
          </el-button-group>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  
     <el-dialog title="新增用户" :visible.sync="dialogFormVisible"  width="500px">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 400px">
    <el-form-item label="姓名" prop="username" >
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
     <el-form-item label="手机" prop="tel" width="60">
      <el-input v-model="ruleForm.tel"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email" width="60">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>

    <el-form-item label="性别" prop="sex">
      <el-select v-model="ruleForm.sex">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>

  </el-form>
</el-dialog>
  </div>
</template>

<script>
import { getList,deleteBatch,addUser } from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      formInline: {
          user: '',
          region: ''
        },
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      total:100,
      currentPage:1,
      pageSize:10,
      selectedRows: [], // 用于存储选中的行
      ruleForm:{
        username:'陈健恒',
        sex:'1',
        tel:'13769484638',
        email:'13579@qq.com',

      },

      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '手机不能为空', trigger: 'blur' },
            {pattern: /^1[3456789]\d{9}$/,message:'请输入正确的手机号',trigger:'blur'}
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message:'请输入正确的邮箱地址',trigger:'blur'}
            
          ]
        },
      

      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        
        },
        formLabelWidth: '120px'
      }
  },
  created() {
    this.fetchData()
  },
  methods: {
    onSubmit() {
      //调用查询
        this.fetchData();
      },
    fetchData() {
      this.listLoading = true
      var json={currentPage:this.currentPage,pageSize:this.pageSize,content:this.formInline.user}
      getList(json).then(response => {
        this.list = response.data.list
        this.listLoading = false
        this.total = response.data.total
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.fetchData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData();
    },
    //每一列按钮事件处理
    handleClick(row) {
      console.log(row);
  },
}
}
</script>
